<template>
  <div>
    <div class="maincss">
      <el-row>
        <el-card>
          <searchBox title='消息管理'
                     :btn='btn'
                     @func='showBtn' />
          <el-card class="gray-card no-border no-margin-top"
                   shadow="never">
            <el-row class="type">
              <el-col span="3">
                <el-select v-model="queryParams.type"
                           placeholder="选择消息类型"
                           class="">
                  <el-option v-for="item in type"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
              <el-col span="1">
                <el-button @click="handleLoadAndQuery()">查询</el-button>
              </el-col>
            </el-row>
            <el-table v-loading="loading"
                      :data="checkList"
                      style="width: 100%;">
              <el-table-column label="模板编号"
                               align="left"
                               prop="templateNo"
                               :show-overflow-tooltip="true" />
              <el-table-column label="消息类型"
                               align="left"
                               prop="type"
                               :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <sapn v-if="scope.row.type === 1">检验消息</sapn>
                  <sapn v-if="scope.row.type === 2">耗材消息</sapn>
                  <sapn v-if="scope.row.type === 3">质控消息</sapn>
                  <sapn v-if="scope.row.type === 4">培训消息</sapn>
                  <sapn v-if="scope.row.type === 5">仪器消息</sapn>
                  <sapn v-if="scope.row.type === 6">其他消息</sapn>
                </template>
              </el-table-column>>
              <el-table-column label="消息内容"
                               align="left"
                               prop="template" />

              <el-table-column label="创建人"
                               align="left"
                               prop="createName"
                               :show-overflow-tooltip="true" />
              <el-table-column label="创建时间"
                               align="left"
                               prop="createTime" />
              <el-table-column label="操作"
                               align="left"
                               class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button size="mini"
                             type="text"
                             @click.native="handleEdit(scope.row)">编辑
                  </el-button>
                  <el-button size="mini"
                             type="text"
                             @click="handleDelete(scope.row)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>

          <pagination v-show="total>0"
                      :total="total"
                      :page.sync="queryParams.pageNum"
                      :limit.sync="queryParams.pageSize"
                      @pagination="handleLoadAndQuery" />

        </el-card>
      </el-row>

    </div>
    <el-drawer :title="title"
               :visible.sync="isVisibleAdd"
               size='65%'>

      <addTemplate @close="handleCloseAdd"
                   ref="editRef" />
    </el-drawer>
  </div>
</template>

<script>
import addTemplate from '@/views/message/components/addTemplate'
import {
  listNotifyTemplate,
  updateNotifyTemplate,
} from '@/api/business/notifyTemplate'

export default {
  name: 'form-board',
  components: {
    addTemplate,
  },
  data() {
    return {
      btn: {
        add: true,
        reg: false,
        down: false,
        export: false,
        imp: false,
        search: true,
        box: false,
      },
      checkList: [],
      loading: false,
      total: '',
      addShow: false,
      redirect: undefined,
      type: [
        {
          value: '',
          label: '选择消息类型',
        },
        {
          value: '1',
          label: '检验消息',
        },
        {
          value: '2',
          label: '耗材消息',
        },
        {
          value: '3',
          label: '质控消息',
        },
        {
          value: '4',
          label: '培训消息',
        },
        {
          value: '5',
          label: '仪器消息',
        },
        {
          value: '6',
          label: '其他消息',
        },
      ],
      value: '',
      total: 5,
      title: '新增',
      queryParams: {
        id: null,
        templateNo: null,
        type: null,
        template: null,
        createTime: null,
        createId: null,
        createName: null,
        useType: null,
        dbStatus: null,
        pageNum: 1,
        pageSize: 10,
      },
      isVisibleAdd: false,
      editId: '',
    }
  },
  watch: {},
  created() {
    this.handleLoadAndQuery()
  },
  methods: {
    handleLoadAndQuery() {
      this.loading = true
      this.checkList = []
      listNotifyTemplate(this.queryParams).then((response) => {
        this.checkList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    handleEdit(row) {
      this.title = '编辑'
      this.isVisibleAdd = true
      this.$refs.editRef.handleOpenEdit(row)
    },
    handleDelete(row) {
      row.dbStatus = 0
      updateNotifyTemplate(row).then((res) => {
        this.handleLoadAndQuery()
      })
    },
    showBtn(data) {
      if (data == 'add') {
        this.isVisibleAdd = true
      }
      if (data === 'search') {
        this.handleLoadAndQuery()
      }
    },
    handleLoadAndQuery() {
      this.loading = true
      this.checkList = []
      listNotifyTemplate(this.queryParams).then((response) => {
        this.checkList = response.rows
        this.total = response.total
        this.loading = false
      })
    },

    handleCloseAdd() {
      this.isVisibleAdd = false
      this.handleLoadAndQuery()
    },

    handleEdit(row) {
      this.title = '编辑'
      this.isVisibleAdd = true
      this.$refs.editRef.handleOpenEdit(row)
    },

    showBtn(data) {
      if (data == 'add') {
        this.title = '新增'
        this.isVisibleAdd = true
        this.$refs.editRef.handleOpenAdd()
      }
    },
  },
}
</script>
